Adwaita: button style tweak

add a darker bottom border to buttons to add some depth.

diff --git a/gtk/theme/Adwaita/_drawing.scss b/gtk/theme/Adwaita/_drawing.scss
index c1a21090b369612b4d97dc4ebcd40a0af4a4e627..e91d4ea4f091cb33ad0d4c7552da8b0fb84e6c97 100644 (file)
--- a/gtk/theme/Adwaita/_drawing.scss
+++ b/gtk/theme/Adwaita/_drawing.scss
@@ -114,9 +114,10 @@
 
 // buttons
 
-@function _border_color ($c) { @return darken($c, 25%); } // colored buttons want
-                                                         // the border form the
-                                                         // base color
+@function _border_color($c, $darker: false) {
+  @if $darker == true { @return darken($c, 30%); }
+  @else { @return darken($c, 20%); }
+}
 
 @function _text_shadow_color ($tc: $fg_color, $bg: $bg_color) {
 //
@@ -192,6 +193,7 @@
     color: $tc;
     outline-color: transparentize($tc, 0.7);
     border-color: if($c!=$bg_color, _border_color($c), $borders_color);
+    border-bottom-color: if($c!=$bg_color, _border_color($c, true), $alt_borders_color);
     @if $variant == 'light' { background-image: linear-gradient(to bottom, $c, darken($c, 4%) 60%, darken($c, 10%)); }
     @else { background-image: linear-gradient(to bottom, darken($c, 2%), darken($c, 4%) 60%, darken($c, 6%)); }
     @include _button_text_shadow($tc, $c);
@@ -205,6 +207,7 @@
     color: $tc;
     outline-color: transparentize($tc, 0.7);
     border-color: if($c!=$bg_color, _border_color($c), $borders_color);
+    border-bottom-color: if($c!=$bg_color, _border_color($c, true), $alt_borders_color);
     @if $variant == 'light' {
       background-image: linear-gradient(to bottom, lighten($c, 6%), $c 60%, darken($c, 4%));
       @include _button_text_shadow($tc,lighten($c, 6%));
@@ -223,7 +226,7 @@
   //
     color: $tc;
     outline-color: transparentize($tc, 0.7);
-    border-color: if($c!=$bg_color, _border_color($c), $alt_borders_color);
+    border-color: if($c!=$bg_color, _border_color($c, true), $alt_borders_color);
     @include _button_text_shadow($tc, $c);
     @if $variant == 'light' {
       background-image: linear-gradient(to bottom, lighten($c, 5%) 20%, $c 90%);
@@ -247,7 +250,7 @@
   //
     color: $tc;
     outline-color: transparentize($tc, 0.7);
-    border-color: if($c!=$bg_color, _border_color($c), $alt_borders_color);
+    border-color: if($c!=$bg_color, _border_color($c, true), $alt_borders_color);
     @if $variant == 'light' {
       background-image: linear-gradient(to bottom, lighten($c, 9%) 10%, lighten($c, 4%) 90%);
       box-shadow: inset 0 1px _button_hilight_color(lighten($c, 6%)),

diff --git a/gtk/theme/Adwaita/gtk-contained-dark.css b/gtk/theme/Adwaita/gtk-contained-dark.css
index b3c9c9da8c9fb50a1b74d439ebc00353ea6e35dc..6b9fb8494728ad50a9c2103b78dcd822d2283c17 100644 (file)
--- a/gtk/theme/Adwaita/gtk-contained-dark.css
+++ b/gtk/theme/Adwaita/gtk-contained-dark.css
@@ -429,6 +429,7 @@ button {
   color: #eeeeec;
   outline-color: rgba(238, 238, 236, 0.3);
   border-color: #212424;
+  border-bottom-color: #151717;
   background-image: linear-gradient(to bottom, #343a3a, #2f3434 60%, #2a2f2f);
   text-shadow: 0 -1px rgba(0, 0, 0, 0.81176);
   -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.81176);
@@ -454,6 +455,7 @@ button {
     color: #eeeeec;
     outline-color: rgba(238, 238, 236, 0.3);
     border-color: #212424;
+    border-bottom-color: #151717;
     background-image: linear-gradient(to bottom, #3b4242, #343a3a 60%, #2f3434);
     text-shadow: 0 -1px rgba(0, 0, 0, 0.76376);
     -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.76376);
@@ -762,7 +764,8 @@ button {
 button.suggested-action {
   color: white;
   outline-color: rgba(255, 255, 255, 0.3);
-  border-color: #0b1e33;
+  border-color: #0f2b48;
+  border-bottom-color: #06121e;
   background-image: linear-gradient(to bottom, #1f5894, #1d538b 60%, #1b4e83);
   text-shadow: 0 -1px rgba(0, 0, 0, 0.70353);
   -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.70353);
@@ -779,7 +782,8 @@ button.suggested-action {
   button.suggested-action:hover {
     color: white;
     outline-color: rgba(255, 255, 255, 0.3);
-    border-color: #0b1e33;
+    border-color: #0f2b48;
+    border-bottom-color: #06121e;
     background-image: linear-gradient(to bottom, #2260a0, #1f5894 60%, #1d538b);
     text-shadow: 0 -1px rgba(0, 0, 0, 0.65553);
     -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.65553);
@@ -788,7 +792,7 @@ button.suggested-action {
   button.suggested-action:checked {
     color: white;
     outline-color: rgba(255, 255, 255, 0.3);
-    border-color: #0b1e33;
+    border-color: #0f2b48;
     background-image: linear-gradient(to bottom, #194776, #1c5187);
     text-shadow: 0 -1px rgba(0, 0, 0, 0.78353);
     -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.78353);
@@ -796,7 +800,7 @@ button.suggested-action {
   .selection-mode button.titlebutton:backdrop,
   button.suggested-action:backdrop,
   button.suggested-action.flat:backdrop {
-    border-color: #0b1e33;
+    border-color: #0f2b48;
     background-image: linear-gradient(to bottom, #215d9c);
     text-shadow: none;
     -gtk-icon-shadow: none;
@@ -812,7 +816,7 @@ button.suggested-action {
     button.suggested-action:backdrop:checked,
     button.suggested-action.flat:backdrop:active,
     button.suggested-action.flat:backdrop:checked {
-      border-color: #0b1e33;
+      border-color: #0f2b48;
       background-image: linear-gradient(to bottom, #184472);
       box-shadow: inset 0 1px rgba(255, 255, 255, 0); }
       .selection-mode button.titlebutton:backdrop:active label, .selection-mode button.titlebutton:backdrop:active, .selection-mode button.titlebutton:backdrop:checked label, .selection-mode button.titlebutton:backdrop:checked,
@@ -844,7 +848,7 @@ button.suggested-action {
       button.suggested-action:backdrop:disabled:checked,
       button.suggested-action.flat:backdrop:disabled:active,
       button.suggested-action.flat:backdrop:disabled:checked {
-        border-color: #0b1e33;
+        border-color: #0f2b48;
         background-image: linear-gradient(to bottom, #1d4877);
         box-shadow: inset 0 1px rgba(255, 255, 255, 0); }
         .selection-mode button.titlebutton:backdrop:disabled:active label, .selection-mode button.titlebutton:backdrop:disabled:checked label,
@@ -875,8 +879,8 @@ button.suggested-action {
       color: #949796; }
     button.suggested-action:disabled:active,
     button.suggested-action:disabled:checked {
-      border-color: #0b1e33;
-      background-image: linear-gradient(to bottom, #1b4470, #1d4877);
+      border-color: #0f2b48;
+      background-image: linear-gradient(to bottom, #1c4572, #1d4877);
       box-shadow: inset 0 1px rgba(255, 255, 255, 0); }
       button.suggested-action:disabled:active label,
       button.suggested-action:disabled:active,
@@ -938,7 +942,8 @@ button.suggested-action {
 button.destructive-action {
   color: white;
   outline-color: rgba(255, 255, 255, 0.3);
-  border-color: #5e0707;
+  border-color: #760909;
+  border-bottom-color: #470505;
   background-image: linear-gradient(to bottom, #cc0f0f, #c20f0f 60%, #b90e0e);
   text-shadow: 0 -1px rgba(0, 0, 0, 0.64078);
   -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.64078);
@@ -954,7 +959,8 @@ button.destructive-action {
   button.destructive-action:hover {
     color: white;
     outline-color: rgba(255, 255, 255, 0.3);
-    border-color: #5e0707;
+    border-color: #760909;
+    border-bottom-color: #470505;
     background-image: linear-gradient(to bottom, #da1010, #cc0f0f 60%, #c20f0f);
     text-shadow: 0 -1px rgba(0, 0, 0, 0.59278);
     -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.59278);
@@ -963,14 +969,14 @@ button.destructive-action {
   button.destructive-action:checked {
     color: white;
     outline-color: rgba(255, 255, 255, 0.3);
-    border-color: #5e0707;
+    border-color: #760909;
     background-image: linear-gradient(to bottom, #aa0d0d, #bd0e0e);
     text-shadow: 0 -1px rgba(0, 0, 0, 0.72078);
     -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.72078);
     box-shadow: inset 0 2px 1px -2px rgba(0, 0, 0, 0.6); }
   button.destructive-action:backdrop,
   button.destructive-action.flat:backdrop {
-    border-color: #5e0707;
+    border-color: #760909;
     background-image: linear-gradient(to bottom, #d51010);
     text-shadow: none;
     -gtk-icon-shadow: none;
@@ -984,7 +990,7 @@ button.destructive-action {
     button.destructive-action:backdrop:checked,
     button.destructive-action.flat:backdrop:active,
     button.destructive-action.flat:backdrop:checked {
-      border-color: #5e0707;
+      border-color: #760909;
       background-image: linear-gradient(to bottom, #a60c0c);
       box-shadow: inset 0 1px rgba(255, 255, 255, 0); }
       button.destructive-action:backdrop:active label,
@@ -1012,7 +1018,7 @@ button.destructive-action {
       button.destructive-action:backdrop:disabled:checked,
       button.destructive-action.flat:backdrop:disabled:active,
       button.destructive-action.flat:backdrop:disabled:checked {
-        border-color: #5e0707;
+        border-color: #760909;
         background-image: linear-gradient(to bottom, #a41212);
         box-shadow: inset 0 1px rgba(255, 255, 255, 0); }
         button.destructive-action:backdrop:disabled:active label,
@@ -1041,8 +1047,8 @@ button.destructive-action {
       color: #949796; }
     button.destructive-action:disabled:active,
     button.destructive-action:disabled:checked {
-      border-color: #5e0707;
-      background-image: linear-gradient(to bottom, #9d1111, #a41212);
+      border-color: #760909;
+      background-image: linear-gradient(to bottom, #9f1111, #a41212);
       box-shadow: inset 0 1px rgba(255, 255, 255, 0); }
       button.destructive-action:disabled:active label,
       button.destructive-action:disabled:active,
@@ -1164,6 +1170,7 @@ button.needs-attention > image, stacksidebar row.needs-attention > label {
   color: #eeeeec;
   outline-color: rgba(238, 238, 236, 0.3);
   border-color: #212424;
+  border-bottom-color: #151717;
   background-image: linear-gradient(to bottom, #343a3a, #2f3434 60%, #2a2f2f);
   text-shadow: 0 -1px rgba(0, 0, 0, 0.81176);
   -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.81176);
@@ -1172,6 +1179,7 @@ button.needs-attention > image, stacksidebar row.needs-attention > label {
     color: #eeeeec;
     outline-color: rgba(238, 238, 236, 0.3);
     border-color: #212424;
+    border-bottom-color: #151717;
     background-image: linear-gradient(to bottom, #3b4242, #343a3a 60%, #2f3434);
     text-shadow: 0 -1px rgba(0, 0, 0, 0.76376);
     -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.76376);
@@ -1697,7 +1705,8 @@ headerbar {
     headerbar.selection-mode button {
       color: #ffffff;
       outline-color: rgba(255, 255, 255, 0.3);
-      border-color: #0b1e33;
+      border-color: #0f2b48;
+      border-bottom-color: #06121e;
       background-image: linear-gradient(to bottom, #1f5894, #1d538b 60%, #1b4e83);
       text-shadow: 0 -1px rgba(0, 0, 0, 0.70353);
       -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.70353);
@@ -1714,7 +1723,8 @@ headerbar {
       headerbar.selection-mode button:hover {
         color: #ffffff;
         outline-color: rgba(255, 255, 255, 0.3);
-        border-color: #0b1e33;
+        border-color: #0f2b48;
+        border-bottom-color: #06121e;
         background-image: linear-gradient(to bottom, #2260a0, #1f5894 60%, #1d538b);
         text-shadow: 0 -1px rgba(0, 0, 0, 0.65553);
         -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.65553);
@@ -1724,7 +1734,7 @@ headerbar {
       headerbar.selection-mode button:checked {
         color: #ffffff;
         outline-color: rgba(255, 255, 255, 0.3);
-        border-color: #0b1e33;
+        border-color: #0f2b48;
         background-image: linear-gradient(to bottom, #194776, #1c5187);
         text-shadow: 0 -1px rgba(0, 0, 0, 0.78353);
         -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.78353);
@@ -1732,7 +1742,7 @@ headerbar {
       .selection-mode.titlebar:not(headerbar) button:backdrop.flat, .selection-mode.titlebar:not(headerbar) button:backdrop,
       headerbar.selection-mode button:backdrop.flat,
       headerbar.selection-mode button:backdrop {
-        border-color: #0b1e33;
+        border-color: #0f2b48;
         background-image: linear-gradient(to bottom, #215d9c);
         text-shadow: none;
         -gtk-icon-shadow: none;
@@ -1750,7 +1760,7 @@ headerbar {
         headerbar.selection-mode button:backdrop.flat:checked,
         headerbar.selection-mode button:backdrop:active,
         headerbar.selection-mode button:backdrop:checked {
-          border-color: #0b1e33;
+          border-color: #0f2b48;
           background-image: linear-gradient(to bottom, #184472);
           box-shadow: inset 0 1px rgba(255, 255, 255, 0);
           border-color: #0f2b48; }
@@ -1767,7 +1777,7 @@ headerbar {
         .selection-mode.titlebar:not(headerbar) button:backdrop.flat:disabled, .selection-mode.titlebar:not(headerbar) button:backdrop:disabled,
         headerbar.selection-mode button:backdrop.flat:disabled,
         headerbar.selection-mode button:backdrop:disabled {
-          border-color: #0b1e33;
+          border-color: #0f2b48;
           background-image: linear-gradient(to bottom, #22558b);
           text-shadow: none;
           -gtk-icon-shadow: none;
@@ -1784,7 +1794,7 @@ headerbar {
           headerbar.selection-mode button:backdrop.flat:disabled:checked,
           headerbar.selection-mode button:backdrop:disabled:active,
           headerbar.selection-mode button:backdrop:disabled:checked {
-            border-color: #0b1e33;
+            border-color: #0f2b48;
             background-image: linear-gradient(to bottom, #1d4877);
             box-shadow: inset 0 1px rgba(255, 255, 255, 0);
             border-color: #0f2b48; }
@@ -1806,7 +1816,7 @@ headerbar {
         -gtk-icon-shadow: none; }
       .selection-mode.titlebar:not(headerbar) button:disabled,
       headerbar.selection-mode button:disabled {
-        border-color: #0b1e33;
+        border-color: #0f2b48;
         background-image: linear-gradient(to bottom, #22558b);
         text-shadow: none;
         -gtk-icon-shadow: none;
@@ -1818,8 +1828,8 @@ headerbar {
         .selection-mode.titlebar:not(headerbar) button:disabled:active, .selection-mode.titlebar:not(headerbar) button:disabled:checked,
         headerbar.selection-mode button:disabled:active,
         headerbar.selection-mode button:disabled:checked {
-          border-color: #0b1e33;
-          background-image: linear-gradient(to bottom, #1b4470, #1d4877);
+          border-color: #0f2b48;
+          background-image: linear-gradient(to bottom, #1c4572, #1d4877);
           box-shadow: inset 0 1px rgba(255, 255, 255, 0); }
           .selection-mode.titlebar:not(headerbar) button:disabled:active label, .selection-mode.titlebar:not(headerbar) button:disabled:active, .selection-mode.titlebar:not(headerbar) button:disabled:checked label, .selection-mode.titlebar:not(headerbar) button:disabled:checked,
           headerbar.selection-mode button:disabled:active label,
@@ -1832,6 +1842,7 @@ headerbar {
         color: #eeeeec;
         outline-color: rgba(238, 238, 236, 0.3);
         border-color: #212424;
+        border-bottom-color: #151717;
         background-image: linear-gradient(to bottom, #343a3a, #2f3434 60%, #2a2f2f);
         text-shadow: 0 -1px rgba(0, 0, 0, 0.81176);
         -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.81176);
@@ -1842,6 +1853,7 @@ headerbar {
           color: #eeeeec;
           outline-color: rgba(238, 238, 236, 0.3);
           border-color: #212424;
+          border-bottom-color: #151717;
           background-image: linear-gradient(to bottom, #3b4242, #343a3a 60%, #2f3434);
           text-shadow: 0 -1px rgba(0, 0, 0, 0.76376);
           -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.76376);
@@ -4109,7 +4121,8 @@ infobar {
   .error button {
     color: #ffffff;
     outline-color: rgba(255, 255, 255, 0.3);
-    border-color: #0b1e33;
+    border-color: #0f2b48;
+    border-bottom-color: #06121e;
     background-image: linear-gradient(to bottom, #1f5894, #1d538b 60%, #1b4e83);
     text-shadow: 0 -1px rgba(0, 0, 0, 0.70353);
     -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.70353);
@@ -4120,7 +4133,8 @@ infobar {
     .error button:hover {
       color: #ffffff;
       outline-color: rgba(255, 255, 255, 0.3);
-      border-color: #0b1e33;
+      border-color: #0f2b48;
+      border-bottom-color: #06121e;
       background-image: linear-gradient(to bottom, #2260a0, #1f5894 60%, #1d538b);
       text-shadow: 0 -1px rgba(0, 0, 0, 0.65553);
       -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.65553);
@@ -4134,7 +4148,7 @@ infobar {
     .error button:checked {
       color: #ffffff;
       outline-color: rgba(255, 255, 255, 0.3);
-      border-color: #0b1e33;
+      border-color: #0f2b48;
       background-image: linear-gradient(to bottom, #194776, #1c5187);
       text-shadow: 0 -1px rgba(0, 0, 0, 0.78353);
       -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.78353);
@@ -4143,7 +4157,7 @@ infobar {
     .question button:disabled,
     .warning button:disabled,
     .error button:disabled {
-      border-color: #0b1e33;
+      border-color: #0f2b48;
       background-image: linear-gradient(to bottom, #22558b);
       text-shadow: none;
       -gtk-icon-shadow: none;
@@ -4160,12 +4174,12 @@ infobar {
     .question button:backdrop,
     .warning button:backdrop,
     .error button:backdrop {
-      border-color: #0b1e33;
+      border-color: #0f2b48;
       background-image: linear-gradient(to bottom, #215d9c);
       text-shadow: none;
       -gtk-icon-shadow: none;
       box-shadow: inset 0 1px rgba(255, 255, 255, 0);
-      border-color: #0b1e33; }
+      border-color: #0f2b48; }
       .info button:backdrop label, .info button:backdrop,
       .question button:backdrop label,
       .question button:backdrop,
@@ -4178,12 +4192,12 @@ infobar {
       .question button:backdrop:disabled,
       .warning button:backdrop:disabled,
       .error button:backdrop:disabled {
-        border-color: #0b1e33;
+        border-color: #0f2b48;
         background-image: linear-gradient(to bottom, #22558b);
         text-shadow: none;
         -gtk-icon-shadow: none;
         box-shadow: inset 0 1px rgba(255, 255, 255, 0);
-        border-color: #0b1e33; }
+        border-color: #0f2b48; }
         .info button:backdrop:disabled label, .info button:backdrop:disabled,
         .question button:backdrop:disabled label,
         .question button:backdrop:disabled,
@@ -4289,6 +4303,7 @@ colorswatch#add-color-button {
     color: #eeeeec;
     outline-color: rgba(238, 238, 236, 0.3);
     border-color: #212424;
+    border-bottom-color: #151717;
     background-image: linear-gradient(to bottom, #343a3a, #2f3434 60%, #2a2f2f);
     text-shadow: 0 -1px rgba(0, 0, 0, 0.81176);
     -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.81176);
@@ -4297,6 +4312,7 @@ colorswatch#add-color-button {
       color: #eeeeec;
       outline-color: rgba(238, 238, 236, 0.3);
       border-color: #212424;
+      border-bottom-color: #151717;
       background-image: linear-gradient(to bottom, #3b4242, #343a3a 60%, #2f3434);
       text-shadow: 0 -1px rgba(0, 0, 0, 0.76376);
       -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.76376);

diff --git a/gtk/theme/Adwaita/gtk-contained.css b/gtk/theme/Adwaita/gtk-contained.css
index b7160d65293faa3b21946d882a887e89524a6a05..02362ed58200bd8c81c59b2e20004ded91c54dcd 100644 (file)
--- a/gtk/theme/Adwaita/gtk-contained.css
+++ b/gtk/theme/Adwaita/gtk-contained.css
@@ -429,6 +429,7 @@ button {
   color: #2e3436;
   outline-color: rgba(46, 52, 54, 0.3);
   border-color: #b1b1ae;
+  border-bottom-color: #91918c;
   background-image: linear-gradient(to bottom, #e8e8e7, #dededd 60%, #cfcfcd);
   text-shadow: 0 1px rgba(255, 255, 255, 0.76923);
   -gtk-icon-shadow: 0 1px rgba(255, 255, 255, 0.76923);
@@ -454,6 +455,7 @@ button {
     color: #2e3436;
     outline-color: rgba(46, 52, 54, 0.3);
     border-color: #b1b1ae;
+    border-bottom-color: #91918c;
     background-image: linear-gradient(to bottom, #f7f7f7, #e8e8e7 60%, #dededd);
     text-shadow: 0 1px rgba(255, 255, 255, 0.76923);
     -gtk-icon-shadow: 0 1px rgba(255, 255, 255, 0.76923);
@@ -765,7 +767,8 @@ button {
 button.suggested-action {
   color: white;
   outline-color: rgba(255, 255, 255, 0.3);
-  border-color: #1c5187;
+  border-color: #215d9c;
+  border-bottom-color: #184472;
   background-image: linear-gradient(to bottom, #4a90d9, #3986d5 60%, #2a76c6);
   text-shadow: 0 -1px rgba(0, 0, 0, 0.54353);
   -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.54353);
@@ -782,7 +785,8 @@ button.suggested-action {
   button.suggested-action:hover {
     color: white;
     outline-color: rgba(255, 255, 255, 0.3);
-    border-color: #1c5187;
+    border-color: #215d9c;
+    border-bottom-color: #184472;
     background-image: linear-gradient(to bottom, #63a0de, #4a90d9 60%, #3986d5);
     text-shadow: 0 -1px rgba(0, 0, 0, 0.49553);
     -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.49553);
@@ -791,7 +795,7 @@ button.suggested-action {
   button.suggested-action:checked {
     color: white;
     outline-color: rgba(255, 255, 255, 0.3);
-    border-color: #1c5187;
+    border-color: #215d9c;
     background-image: linear-gradient(to bottom, #276fba, #3583d5);
     text-shadow: 0 -1px rgba(0, 0, 0, 0.62353);
     -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.62353);
@@ -878,8 +882,8 @@ button.suggested-action {
       color: #8b8e8f; }
     button.suggested-action:disabled:active,
     button.suggested-action:disabled:checked {
-      border-color: #1c5187;
-      background-image: linear-gradient(to bottom, #4b8dd3, #5094db);
+      border-color: #215d9c;
+      background-image: linear-gradient(to bottom, #4b8fd5, #5094db);
       box-shadow: inset 0 1px rgba(255, 255, 255, 0); }
       button.suggested-action:disabled:active label,
       button.suggested-action:disabled:active,
@@ -941,7 +945,8 @@ button.suggested-action {
 button.destructive-action {
   color: white;
   outline-color: rgba(255, 255, 255, 0.3);
-  border-color: #8e0b0b;
+  border-color: #a60c0c;
+  border-bottom-color: #760909;
   background-image: linear-gradient(to bottom, #ef2929, #ee1616 60%, #d51010);
   text-shadow: 0 -1px rgba(0, 0, 0, 0.56078);
   -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.56078);
@@ -957,7 +962,8 @@ button.destructive-action {
   button.destructive-action:hover {
     color: white;
     outline-color: rgba(255, 255, 255, 0.3);
-    border-color: #8e0b0b;
+    border-color: #a60c0c;
+    border-bottom-color: #760909;
     background-image: linear-gradient(to bottom, #f14545, #ef2929 60%, #ee1616);
     text-shadow: 0 -1px rgba(0, 0, 0, 0.51278);
     -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.51278);
@@ -966,7 +972,7 @@ button.destructive-action {
   button.destructive-action:checked {
     color: white;
     outline-color: rgba(255, 255, 255, 0.3);
-    border-color: #8e0b0b;
+    border-color: #a60c0c;
     background-image: linear-gradient(to bottom, #c70f0f, #ed1212);
     text-shadow: 0 -1px rgba(0, 0, 0, 0.64078);
     -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.64078);
@@ -1044,8 +1050,8 @@ button.destructive-action {
       color: #8b8e8f; }
     button.destructive-action:disabled:active,
     button.destructive-action:disabled:checked {
-      border-color: #8e0b0b;
-      background-image: linear-gradient(to bottom, #e52d2d, #ef3131);
+      border-color: #a60c0c;
+      background-image: linear-gradient(to bottom, #e82d2d, #ef3131);
       box-shadow: inset 0 1px rgba(255, 255, 255, 0); }
       button.destructive-action:disabled:active label,
       button.destructive-action:disabled:active,
@@ -1167,6 +1173,7 @@ button.needs-attention > image, stacksidebar row.needs-attention > label {
   color: #2e3436;
   outline-color: rgba(46, 52, 54, 0.3);
   border-color: #b1b1ae;
+  border-bottom-color: #91918c;
   background-image: linear-gradient(to bottom, #e8e8e7, #dededd 60%, #cfcfcd);
   text-shadow: 0 1px rgba(255, 255, 255, 0.76923);
   -gtk-icon-shadow: 0 1px rgba(255, 255, 255, 0.76923);
@@ -1175,6 +1182,7 @@ button.needs-attention > image, stacksidebar row.needs-attention > label {
     color: #2e3436;
     outline-color: rgba(46, 52, 54, 0.3);
     border-color: #b1b1ae;
+    border-bottom-color: #91918c;
     background-image: linear-gradient(to bottom, #f7f7f7, #e8e8e7 60%, #dededd);
     text-shadow: 0 1px rgba(255, 255, 255, 0.76923);
     -gtk-icon-shadow: 0 1px rgba(255, 255, 255, 0.76923);
@@ -1704,7 +1712,8 @@ headerbar {
     headerbar.selection-mode button {
       color: #ffffff;
       outline-color: rgba(255, 255, 255, 0.3);
-      border-color: #1c5187;
+      border-color: #215d9c;
+      border-bottom-color: #184472;
       background-image: linear-gradient(to bottom, #4a90d9, #3986d5 60%, #2a76c6);
       text-shadow: 0 -1px rgba(0, 0, 0, 0.54353);
       -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.54353);
@@ -1721,7 +1730,8 @@ headerbar {
       headerbar.selection-mode button:hover {
         color: #ffffff;
         outline-color: rgba(255, 255, 255, 0.3);
-        border-color: #1c5187;
+        border-color: #215d9c;
+        border-bottom-color: #184472;
         background-image: linear-gradient(to bottom, #63a0de, #4a90d9 60%, #3986d5);
         text-shadow: 0 -1px rgba(0, 0, 0, 0.49553);
         -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.49553);
@@ -1731,7 +1741,7 @@ headerbar {
       headerbar.selection-mode button:checked {
         color: #ffffff;
         outline-color: rgba(255, 255, 255, 0.3);
-        border-color: #1c5187;
+        border-color: #215d9c;
         background-image: linear-gradient(to bottom, #276fba, #3583d5);
         text-shadow: 0 -1px rgba(0, 0, 0, 0.62353);
         -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.62353);
@@ -1813,7 +1823,7 @@ headerbar {
         -gtk-icon-shadow: none; }
       .selection-mode.titlebar:not(headerbar) button:disabled,
       headerbar.selection-mode button:disabled {
-        border-color: #1c5187;
+        border-color: #215d9c;
         background-image: linear-gradient(to bottom, #65a1df);
         text-shadow: none;
         -gtk-icon-shadow: none;
@@ -1825,8 +1835,8 @@ headerbar {
         .selection-mode.titlebar:not(headerbar) button:disabled:active, .selection-mode.titlebar:not(headerbar) button:disabled:checked,
         headerbar.selection-mode button:disabled:active,
         headerbar.selection-mode button:disabled:checked {
-          border-color: #1c5187;
-          background-image: linear-gradient(to bottom, #4b8dd3, #5094db);
+          border-color: #215d9c;
+          background-image: linear-gradient(to bottom, #4b8fd5, #5094db);
           box-shadow: inset 0 1px rgba(255, 255, 255, 0); }
           .selection-mode.titlebar:not(headerbar) button:disabled:active label, .selection-mode.titlebar:not(headerbar) button:disabled:active, .selection-mode.titlebar:not(headerbar) button:disabled:checked label, .selection-mode.titlebar:not(headerbar) button:disabled:checked,
           headerbar.selection-mode button:disabled:active label,
@@ -1839,6 +1849,7 @@ headerbar {
         color: #2e3436;
         outline-color: rgba(46, 52, 54, 0.3);
         border-color: #b1b1ae;
+        border-bottom-color: #91918c;
         background-image: linear-gradient(to bottom, #e8e8e7, #dededd 60%, #cfcfcd);
         text-shadow: 0 1px rgba(255, 255, 255, 0.76923);
         -gtk-icon-shadow: 0 1px rgba(255, 255, 255, 0.76923);
@@ -1849,6 +1860,7 @@ headerbar {
           color: #2e3436;
           outline-color: rgba(46, 52, 54, 0.3);
           border-color: #b1b1ae;
+          border-bottom-color: #91918c;
           background-image: linear-gradient(to bottom, #f7f7f7, #e8e8e7 60%, #dededd);
           text-shadow: 0 1px rgba(255, 255, 255, 0.76923);
           -gtk-icon-shadow: 0 1px rgba(255, 255, 255, 0.76923);
@@ -4138,7 +4150,8 @@ infobar {
   .error button {
     color: #ffffff;
     outline-color: rgba(255, 255, 255, 0.3);
-    border-color: #1c5187;
+    border-color: #215d9c;
+    border-bottom-color: #184472;
     background-image: linear-gradient(to bottom, #4a90d9, #3986d5 60%, #2a76c6);
     text-shadow: 0 -1px rgba(0, 0, 0, 0.54353);
     -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.54353);
@@ -4149,7 +4162,8 @@ infobar {
     .error button:hover {
       color: #ffffff;
       outline-color: rgba(255, 255, 255, 0.3);
-      border-color: #1c5187;
+      border-color: #215d9c;
+      border-bottom-color: #184472;
       background-image: linear-gradient(to bottom, #63a0de, #4a90d9 60%, #3986d5);
       text-shadow: 0 -1px rgba(0, 0, 0, 0.49553);
       -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.49553);
@@ -4163,7 +4177,7 @@ infobar {
     .error button:checked {
       color: #ffffff;
       outline-color: rgba(255, 255, 255, 0.3);
-      border-color: #1c5187;
+      border-color: #215d9c;
       background-image: linear-gradient(to bottom, #276fba, #3583d5);
       text-shadow: 0 -1px rgba(0, 0, 0, 0.62353);
       -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.62353);
@@ -4172,7 +4186,7 @@ infobar {
     .question button:disabled,
     .warning button:disabled,
     .error button:disabled {
-      border-color: #1c5187;
+      border-color: #215d9c;
       background-image: linear-gradient(to bottom, #65a1df);
       text-shadow: none;
       -gtk-icon-shadow: none;
@@ -4194,7 +4208,7 @@ infobar {
       text-shadow: none;
       -gtk-icon-shadow: none;
       box-shadow: inset 0 1px rgba(255, 255, 255, 0);
-      border-color: #1c5187; }
+      border-color: #215d9c; }
       .info button:backdrop label, .info button:backdrop,
       .question button:backdrop label,
       .question button:backdrop,
@@ -4212,7 +4226,7 @@ infobar {
         text-shadow: none;
         -gtk-icon-shadow: none;
         box-shadow: inset 0 1px rgba(255, 255, 255, 0);
-        border-color: #1c5187; }
+        border-color: #215d9c; }
         .info button:backdrop:disabled label, .info button:backdrop:disabled,
         .question button:backdrop:disabled label,
         .question button:backdrop:disabled,
@@ -4318,6 +4332,7 @@ colorswatch#add-color-button {
     color: #2e3436;
     outline-color: rgba(46, 52, 54, 0.3);
     border-color: #b1b1ae;
+    border-bottom-color: #91918c;
     background-image: linear-gradient(to bottom, #e8e8e7, #dededd 60%, #cfcfcd);
     text-shadow: 0 1px rgba(255, 255, 255, 0.76923);
     -gtk-icon-shadow: 0 1px rgba(255, 255, 255, 0.76923);
@@ -4326,6 +4341,7 @@ colorswatch#add-color-button {
       color: #2e3436;
       outline-color: rgba(46, 52, 54, 0.3);
       border-color: #b1b1ae;
+      border-bottom-color: #91918c;
       background-image: linear-gradient(to bottom, #f7f7f7, #e8e8e7 60%, #dededd);
       text-shadow: 0 1px rgba(255, 255, 255, 0.76923);
       -gtk-icon-shadow: 0 1px rgba(255, 255, 255, 0.76923);